<template>
    <div :style="{ width: width + 'px', height: height + 'px', 'background-position': bgPoition }" class="echart-box-bgs">
        <ResponsiveBarChart :options="chartOptions" @bar-clicked="onBarClicked" />
        <div class="center-txt">{{ optionData.reduce((total, item) => total + item.value, 0) }}</div>
        <div class="li-box">
            <ul>
                <li v-for="(item, index) in optionData" :key="index" class="li-bg">
                    <span class="cir"></span> <span class="square" :style="{ background: colors[index] }"></span><span class="name" :title="item.name">{{ item.name }}</span><span class="per">{{ item.rate + '%' }}</span>
                </li>
            </ul>
        </div>
    </div>
</template>
  
<script>
import ResponsiveBarChart from '@/components/echarts/ResponsiveBarChart.vue';

export default {
    name: 'RisingSun',
    components: { ResponsiveBarChart },
    props: {
        width: {
            type: Number,
            default: 470
        },
        height: {
            type: Number,
            default: 200
        },
        withinData: {
            type: [String, Number],
            default: 999
        },
        optionData: {
            type: Array,
            default: () => [
                { name: '数据6', value: 10, rate: 10 },
                { name: '数据2', value: 20, rate: 20 },
                { name: '数据3', value: 30, rate: 30 },
                { name: '数据4', value: 40, rate: 40 },
            ]
        },
        colors: {
            type: Array,
            default: () => ['#ffde00', '#0097a7', '#4caf50', '#9c27b0', '#ff5722']
        },
        bgPoition: {
            type: String,
            default: '24.5% 50%'
        },
        // 环形设置
        ringPoition: {
            type: Array,
            default: ['36.4%', '50%']
        },
    },
    data() {
        return {
            chartOptions: {},
        }
    },
    computed: {},
    methods: {
        onBarClicked(params) {
            console.log(params);
            // 在这里处理点击事件，例如弹出模态框显示更多数据
        },
        getOption() {

            this.chartOptions = {
                tooltip: {
                    trigger: 'item',
                    confine: true,
                    borderColor: 'rgba(143, 171, 191, 0.30)',
                    backgroundColor: 'rgba(18, 24, 29, 0.90)',
                    textStyle: {
                        color: 'white'
                    },
                    formatter: "{b}: {c} ({d}%)"
                },
                // legend: {
                //     orient: 'vertical', // 设置图例为垂直方向
                //     // x: 'right', // 图例靠右
                //     y: 'center', // 图例从顶部开始
                //     right: 30,
                //     data: legendData, // 初始时为空，稍后填充
                //     icon: 'square',
                //     itemWidth: 8,
                //     itemHeight: 8,
                //     itemGap: 20,
                //     textStyle: {
                //         color: 'rgba(217, 231, 255, 1)', // 文字颜色
                //         fontSize: 12,
                //     },
                // },
                series: [
                    {
                        type: 'pie',
                        radius: ['55%', '61%'],
                        center: this.ringPoition,
                        data: this.optionData,
                        label: {
                            show: false
                        },
                        hoverAnimation: false,
                    }
                ],
                graphic: [
                    {
                        type: 'image',
                        z: -1,
                        bounding: 'raw',
                        left: 'center',
                        top: 'center',
                        origin: ['50%', '50%'],
                    },
                    //圆圈中心的数值
                    // {
                    //     type: 'text',
                    //     left: 'center',
                    //     top: 'center',
                    //     style: {
                    //         text: this.withinData, // 中心显示的文字
                    //         fill: '#fff', // 文字颜色
                    //         font: 'bold 20px Arial', // 字体样式
                    //         textAlign: 'center',
                    //         textBaseline: 'middle'
                    //     }
                    // }
                ]
            };
        },
    },
    created() {
        this.getOption()
    },
};
</script>
<style lang='less' scoped>
.echart-box-bgs {
    position: relative;
    background: url('../../../assets/images/acreagebg.png');
    background-repeat: no-repeat;
    background-position: 24.5% 50%;

    .center-txt {
        position: absolute;
        top: 43%;
        left: 10%;
        font-size: 20px;
        width: 120px;
        text-align: center;
    }
}

.li-box {
    position: absolute;
    right: 15px;
    top: 0;
    bottom: 0;
    width: 155px;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    align-items: center;

    ul {
        width: 100%;
        height: auto;
        max-height: 200px;
    }
}

.li-bg {
    position: relative;
    width: 100%;
    z-index: 999;
    height: 24px;
    overflow: hidden;
    background-color: rgba(rgba(143, 171, 191, 0.10));
    // margin-top: -25px;
    display: flex;
    margin: 5px;
    font-size: 12px;

    .name {
        display: inline-block;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #D0DEEE;
    }

    .per {
        text-align: right;
        margin-right: 10px;
    }

    span.cir {
        position: absolute;
        width: 3px;
        height: 3px;
        left: -1.5px;
        top: -1.5px;
        background: rgba(152, 207, 255, 1);
        display: block;
        transform-origin: center center;
        transform: rotate(45deg);
    }
}

.square {
    width: 8px;
    height: 8px;
    margin: 8px;
    display: inline-block;
}
</style>